import React, { Component } from "react";

// 引入classnames，用于不同条件添加不同样式
import classNames from "classnames/bind";
// 引入css，要取个名字
import styles from "./05-style2.css";

// 执行bind方法，拿到一个cx函数
let cx = classNames.bind(styles);

class App extends Component {
  // 在react里面，使用state的对象来作为响应式数据
  state = {
    done: false,
    num: 3,
  };
  render() {
    // console.log(this);
    const { done, num } = this.state;
    let className = cx({
      // key表示的是css文件里面的类名，value表示的是变量或者表达式
      finish: done && num === 3,
      unfinish: !done,
    });
    return (
      <>
        <h2>使用classnames给不同条件添加不同样式</h2>
        {/* <p className={done ? "finish" : "unfinish"}>hello react!!</p> */}
        <p className={className}>hello react!!</p>
      </>
    );
  }
}

export default App;
